<script lang="ts" setup>
import { reactive, ref } from 'vue';

import { avatars, VIcon } from '@croco/framework/icons';
import { $t } from '@croco/framework/locales';
import { useUserStore } from '@croco/framework/stores';

import { service } from '#/api/request';

defineProps<{ title: string }>();

const emit = defineEmits(['closed']);

const userStore = useUserStore();
const avatar = ref(userStore.userInfo.avatar);

const properties = reactive({
    visible: true,
    data: {
        status: '',
        active: '1',
        avatars: {} as Record<string, Array<string>>,
    },
    handle: {
        loadAvatars() {
            avatars.forEach((iconName) => {
                let flag = iconName.split(':')[1] as string;
                flag = flag.split('_')[0] as string;
                if (Object.prototype.hasOwnProperty.call(properties.data.avatars, flag)) {
                    properties.data.avatars[flag]?.push(iconName);
                } else {
                    properties.data.avatars[flag] = [iconName];
                }
            });
        },
        selected: (value: string) => {
            avatar.value = value;
        },
        close: (r: any) => {
            properties.data.status = typeof r === 'string' ? r : '';
            properties.visible = false;
        },
        closed: () => {
            emit('closed', properties.data.status === 'success' ? avatar.value : undefined);
        },
        submit: () => {
            service
                .put('/profile/avatar', {
                    avatar: avatar.value,
                    username: userStore.userInfo.username,
                })
                .then(() => {
                    userStore.updateUserInfo({ avatar: avatar.value });
                    properties.handle.close('success');
                });
        },
    },
});

properties.handle.loadAvatars();
</script>
<template>
    <el-dialog
        v-model="properties.visible"
        :align-center="true"
        :before-close="properties.handle.close"
        :close-on-click-modal="false"
        :draggable="true"
        :overflow="true"
        :title="title"
        :width="620"
        body-class="avatar-body"
        @closed="properties.handle.closed()"
    >
        <el-row class="update-avatar">
            <el-col :span="6" style="display: flex; flex-direction: column; align-items: center">
                <span class="preview">{{ $t('page.profile.preview') }}</span>
                <el-avatar :size="30" style="margin: 15px 0">
                    <VIcon :icon="avatar" class="h-full w-full" />
                </el-avatar>
                <span>30 x 30</span>
                <el-avatar :size="120" style="margin: 15px 0">
                    <VIcon :icon="avatar" class="h-full w-full" />
                </el-avatar>
                <span>120 x 120</span>
            </el-col>
            <el-col :span="18">
                <el-tabs v-model="properties.data.active" class="avatar-tabs">
                    <el-tab-pane :label="$t('page.profile.series1')" name="1">
                        <template v-for="item in properties.data.avatars.hz" :key="item">
                            <div class="avatar-wrapper">
                                <el-avatar size="large" @click="properties.handle.selected(item)">
                                    <VIcon :icon="item" class="h-full w-full" />
                                </el-avatar>
                            </div>
                        </template>
                    </el-tab-pane>
                    <el-tab-pane :label="$t('page.profile.series2')" force-render name="2">
                        <template v-for="item in properties.data.avatars.al" :key="item">
                            <div class="avatar-wrapper">
                                <el-avatar size="large" @click="properties.handle.selected(item)">
                                    <VIcon :icon="item" class="h-full w-full" />
                                </el-avatar>
                            </div>
                        </template>
                    </el-tab-pane>
                    <el-tab-pane :label="$t('page.profile.series3')" name="3">
                        <template v-for="item in properties.data.avatars.im" :key="item">
                            <div class="avatar-wrapper">
                                <el-avatar size="large" @click="properties.handle.selected(item)">
                                    <VIcon :icon="item" class="h-full w-full" />
                                </el-avatar>
                            </div>
                        </template>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="properties.handle.close('cancel')">{{ $t('common.cancel') }}</el-button>
                <el-button type="primary" @click="properties.handle.submit()">{{ $t('common.confirm') }}</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style>
.avatar-body {
    height: 40vh;
}
</style>

<style lang="scss" scoped>
.update-avatar {
    .preview {
        font-size: 14px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid var(--el-border-color-light);
        width: 100%;
    }

    .el-tabs__content {
        padding: 0 1rem 1rem 1rem !important;

        .el-tab-pane {
            .avatar-wrapper {
                display: inline-block;

                .el-avatar {
                    //width: 5rem;
                    //border-radius: 2px;
                    display: inline-block;
                    margin: 1rem;
                    cursor: pointer;
                }
            }
        }
    }
}
</style>
